<template>
  <div id="luggage-info-list" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item ms-1" aria-current="page">基础数据</li>
        <li class="breadcrumb-item" aria-current="page">
          <router-link to="/h5/data/luggages">行李信息</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>

        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="detail !== null">
      <div class="card-body">
        <dl class="row">
          <dt class="col-4 text-end">航司</dt>
          <dd class="col-8">{{ detail.carrier }}</dd>
          <dt class="col-4 text-end">行李类型</dt>
          <dd class="col-8">
            <span v-if="detail.luggageType === 0" class="small">托运</span>
            <span v-if="detail.luggageType === 1" class="small">非托运</span>
          </dd>
          <dt class="col-4 text-end">舱位等级</dt>
          <dd class="col-8">
            <span v-if="detail.cabinType === 10" class="small">头等舱</span>
            <span v-if="detail.cabinType === 20" class="small">商务舱</span>
            <span v-if="detail.cabinType === 30" class="small">经济舱</span>
            <span v-if="detail.cabinType === 40" class="small">超级经济舱</span>
          </dd>

          <dt class="col-4 text-end">标题</dt>
          <dd class="col-8">{{ detail.title }}</dd>
          <dt class="col-4 text-end">免费行李额</dt>
          <dd class="col-8">{{ detail.freeLimit }}</dd>

          <dt class="col-4 text-end">体积限定/件</dt>
          <dd class="col-8">{{ detail.volumeLimit }}</dd>

          <dt class="col-4 text-end">重量限定/件</dt>
          <dd class="col-8">{{ detail.weightLimit }}</dd>

          <dt class="col-4 text-end">备注</dt>
          <dd class="col-8">{{ detail.remark }}</dd>
        </dl>
      </div>
      <div class="card-footer row" v-if="isDataAdmin">
        <a
          href="javascript:void(0)"
          @click.stop="editLuggage()"
          class="btn btn-primary mb-2"
          >修改</a
        >
        <a
          href="javascript:void(0)"
          @click.stop="copyLuggage()"
          class="btn btn-secondary"
          >复制</a
        >
      </div>
    </template>
  </div>
</template>

<script>
import $ from "jquery";
import { getLuggage, saveLuggageInfo } from "@/api/basic-data.js";

export default {
  data() {
    return {
      id: 0,
      carrier: "",
      detail: null,
    };
  },
  computed: {
    isDataAdmin() {
      return this.$store.getters.isDataAdmin;
    },
  },
  mounted: function () {
    this.id = parseInt(this.$route.params.id);
    this.searchDetail();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    searchDetail: function () {
      getLuggage(this.id, (v) => {
        this.detail = v;
      });
    },
    editLuggage: function () {
      this.$router.push("/h5/data/luggage?id=" + this.id);
    },
    copyLuggage: function () {
      this.$router.push("/h5/data/luggage?id=" + this.id + "&mode=1");
    },
  },
};
</script>
